<template>
  <div class="flex justify-between mb-10px">
    <div>
      <span>应用：</span>
      <Select
        v-model:value="selectReq.appId"
        :allowClear="true"
        :field-names="{ label: 'name', value: 'id' }"
        :options="appSelectList"
        placeholder="请选择应用"
        style="width: 200px"
      />
      <span class="ml-10px">所属企业：</span>
      <Select
        v-model:value="selectReq.tenantCode"
        :allowClear="true"
        :field-names="{ label: 'name', value: 'code' }"
        :options="tenantSelectList"
        placeholder="请选择所属企业"
        style="width: 200px"
      />
      <Button class="ml-20px mr-10px" @click="reset">重置</Button>
      <Button type="primary" @click="getList">查询</Button>
    </div>
    <div>
      <Button v-per="'create'" type="primary" @click="handleAdd">创建升级任务</Button>
    </div>
  </div>
  <div>
    <div>
      <Table
        :columns="columns"
        :dataSource="upgradeTaskList"
        :loading="loading"
        :pagination="false"
        :scroll="scroll"
        bordered
        class="main-table"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'operation'">
            <span v-per="'rollBack'">
              <Button
                :disabled="record.status === 'RUNNING' || record.status === 'TASK_BACK'"
                type="link"
                @click="handleBack(record)"
                >回滚
              </Button>
            </span>
            <Divider type="vertical" />
            <span v-per="'update'">
              <Button :disabled="record.status !== 'SUCCESSFUL'" type="link" @click="handleEdit(record)">编辑</Button>
            </span>
            <Divider type="vertical" />
            <span v-per="'detail'">
              <Button type="link" @click="handleView(record)">查看详情</Button>
            </span>
          </template>
        </template>
      </Table>
      <br />
      <Pagination
        v-model:current="current"
        v-model:pageSize="pageSize"
        :show-total="(total) => `共 ${total} 条`"
        :total="total"
        show-size-changer
        @showSizeChange="onShowSizeChange"
      />
      <Detail ref="detailDrawerRef" :upgradeDetail="upgradeDetail"></Detail>
      <ServerDrawer ref="serverDrawerRef" @refresh="getList"></ServerDrawer>
      <UpgradeTypeModal
        ref="upgradeTypeModalRef"
        @showServerDrawer="openServerDrawer"
        @showUiDrawer="openUiDrawer"
      ></UpgradeTypeModal>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Button, Divider, Pagination, Select, Table } from 'ant-design-vue';
import { reactive, ref, watch } from 'vue';
import { columns } from './drawer.data';
import { UpgradeTaskListResultModel } from '/@/api/upgrade-center/model/upgradeTaskModel';
import { getUpgradeTasks, rollBackUpgradeTask } from '/@/api/upgrade-center/upgradeTask';
import Detail from './component/detail.vue';
import ServerDrawer from './component/ServerDrawer.vue';
import UpgradeTypeModal from '/@/views/upgrade-center/task/component/upgradeTypeModal.vue';
import { getAppForTenants, getTenantList } from '/@/api/upgrade-center/upgradeForm';
import { AppItem, TenantItem } from '/@/api/upgrade-center/model/upgradeFormModel';

const scroll = ref<undefined | object>(undefined);
const upgradeTypeModalRef = ref();
const loading = ref(true);
let upgradeTaskList = ref<UpgradeTaskListResultModel[]>([]);
let appSelectList = ref<AppItem[]>();
let tenantSelectList = ref<TenantItem[]>();
const serverDrawerRef = ref();
const detailDrawerRef = ref();
let upgradeDetail = ref({});
let current = ref(1);
const total = ref<number>(0);
const pageSize = ref(10);
let selectReq = reactive({
  current: current.value,
  size: pageSize.value,
  appId: '',
  tenantCode: '',
});

async function getList() {
  let changedParams = {
    current: current.value,
    size: pageSize.value,
    appId: selectReq.appId,
    tenantCode: selectReq.tenantCode,
  };
  try {
    let res = await getUpgradeTasks(changedParams);
    upgradeTaskList.value = res.items;
    total.value = res.total;
  } finally {
    loading.value = false;
  }
}

// 分页查询
const onShowSizeChange = (current: number, pageSize: number) => {
  selectReq.size = pageSize;
  selectReq.current = current;
  getList();
};
watch(pageSize, (val) => {
  if (val > 10) {
    scroll.value = { y: 500 };
  }

  selectReq.size = pageSize.value;
});
watch(current, () => {
  selectReq.current = current.value;
  getList();
});

// 所属企业下拉选择器的function
const initSelect = async () => {
  appSelectList.value = await getAppForTenants();
  tenantSelectList.value = await getTenantList();
};

async function reset() {
  selectReq.tenantCode = '';
  selectReq.appId = '';
}

// 回滚
async function handleBack(record: Recordable) {
  await rollBackUpgradeTask({
    taskId: record.id,
  });
  getList();
}

// 查看详情
function handleView(record: Recordable) {
  upgradeDetail.value = record;
  detailDrawerRef.value.openDrawer();
}

// 编辑
function handleEdit(record: Recordable) {
  if (record.instanceType === null) {
    serverDrawerRef.value.openDrawer(3, record);
  } else {
    serverDrawerRef.value.openDrawer(1, record);
  }
}

// 创建升级任务
function handleAdd() {
  upgradeTypeModalRef.value.showModal();
}

function openServerDrawer() {
  serverDrawerRef.value.openDrawer(0, null);
}

function openUiDrawer() {
  serverDrawerRef.value.openDrawer(2, null);
}

getList();
initSelect();
</script>
<style lang="less">
.ant-pagination {
  float: right;
}
</style>
